<template>
  <div>
    <div id="middle-nav">
      <ul>
        <li>当前位置:</li>
        <li>首页</li>
        <li>></li>
        <li>关于我</li>
      </ul>
    </div>

    <div id="aboutautor" :style="{
      backgroundImage:
        'url(' + require('../assets/images/backgroundimg.jpg') + ')',
    }">

      <div id="selfIntroduction">
        <div id="userAvatar" @click="aaa"></div>
        {{list.about}}
      </div>
      <div id="skill" class="global">
        <span>技能</span>
        <span>
          <p v-for="(item,index) in list.skill">{{index+1}}、{{item.name}}（{{item.degree}}）</p>
        </span>
      </div>
      <div id="education" class="global">
        <span>教育</span>
        <span>
          <p v-for="(item,index) in list.education">{{index+1}}、{{item.name}}（{{item.degree}}）</p>
        </span>
      </div>
      <div id="hobby" class="global">
        <span>爱好</span>
        <span>
          <p v-for="(item,index) in list.hobby">{{index+1}}、{{item}}</p>
        </span>
      </div>

    </div>
    <!-- <div id="load">点击我加载更多</div> -->
  </div>
</template>

<script>
  // import bgImg from '@../assets/images/backgroundimg.jpg'
  export default {
    name: "aboutautor",
    
    data() {
      return {
        list:{},
      };
    },
    methods:{
      aaa(){
        console.log(this.value);
      }
    },
    created() {
      // this.$axios({
      //   url:'./data/data.json'
      // })
      // .then(res=>{
      //   console.log(res);
      // })
      // .catch(err=>{
      //   console.log(err);
      // })

      // (async () => {
      //   const res = await fetch('../../data/data.json');
      //   console.log(res)
      //   const result = await res.json();

      //   this.list = result;
      //   console.log(result)
      // })(); 
      fetch('../../data/data.json')
      .then((res)=>{
        return res.json()
      })
      .then((data)=>{
        this.list=data
        // console.log("****"+data)
      })
      .catch((err)=>{
        console.log("-----"+err)
      })

    }
  };
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  #middle-nav {
    background-color: white;
    color: gray;
  }

  #middle-nav>ul {
    vertical-align: middle;
  }

  #middle-nav>ul>li {
    float: left;
    margin: 10px 0 10px 10px;

  }

  #middle-nav>ul>li:first-child {
    padding-right: 10px;
    padding-left: 10px;

  }

  #aboutautor {
    width: 100%;
    height: 100%;
    background-size: 100% 100%;
    margin-top: 5px;
    display: inline-block;
  }

  #userAvatar {
    background-color: red;
    width: 150px;
    height: 200px;
    float: right;
    margin: 5px;
  }

  #selfIntroduction {
    border: 1px solid rgba(70, 164, 223, 0.5);
    width: 570px;
    display: inline-block;
    margin: 9px 9px 0;
    text-indent: 2em;
    box-shadow: 8px 8px 7xp rgba(224, 10, 10, 0.5);
  }

  .global {
    width: 570px;
    border: 1px solid rgba(70, 164, 223, 0.5);
    margin: 9px;
    display: flex;
    display: table;


  }

  #hobby {
    margin-bottom: 9px;

  }

  #load {
    width: 590px;
    height: 40px;
    margin-top: 5px;
    background-color: white;
    text-align: center;
    line-height: 40px;
  }

  .global>span:first-child {
    height: 100%;
    width: 10%;
    border-right: 1px solid rgba(70, 164, 223, 0.5);
    display: table-cell;
    font-size: 20px;
    text-align: center;
    vertical-align: middle;
    color: rgb(13, 245, 253);

  }

  .global>span:last-child {
    width: 100%;
    height: 100%;
    display: table-cell;
    vertical-align: middle;
    color: rgb(13, 245, 253);
    padding: 9px 0;

  }

  .global>span:last-child>p {
    margin-left: 15px;
  }
</style>